<template>
  <div class="home-box">
    <van-row class="search-container">
      <van-col span="20">
        <van-button
          size="large"
          class="search-container-btn"
          @click="onClickSearch"
        >
          搜索
        </van-button>
      </van-col>
      <van-col
        span="4"
        class="search-container-txt"
      >
        <span
          @click="onClickFilter"
        >
          筛选
        </span>
      </van-col>
    </van-row>

    <!-- <keep-alive> -->
      <van-tabs v-model="tabActive" sticky @click="onClickTabChange">
        <van-tab
          v-for="(itemList, keyList) in list"
          :key="keyList"
          :title="keyList === 'communicate' ? '交流群' : '推广群'"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad"
            class="group-container"
          >
            <template v-for="(item, index) in itemList">
              <div
                class="group-item"
                @click.stop='jumpToDetail(item.id)'
              >
                <van-row class="group-item-title" gutter="10">
                  <van-col span="4">
                    <img class="group-item-title-img" :src="item.userImg" alt="">
                  </van-col>
                  <van-col span="20">
                    <div class="group-item-title-content">
                      <span class="group-item-title-content-top">{{ item.userName }}</span>
                      <span class="group-item-title-content-bottom">{{ item.userDate }}</span>
                    </div>
                    <span class="group-item-title-price">{{ item.price }}</span>
                  </van-col>
                </van-row>

                <p class="group-detail-title">{{ item.groupName }}</p>
                <p class="group-detail-txt">{{ item.groupDetail }}</p>

                <van-row class="group-item-title">
                  <van-col span="22" class="label-container">
                    <template v-for="(labelItem, labelIndex) in item.label">
                      <span
                        class="label-container-item"
                      >{{ labelItem }}</span>
                    </template>
                  </van-col>
                  <van-col span="2" class="label-container-dot">
                    <span>
                      ...
                    </span>
                  </van-col>
                </van-row>

                <van-row class="group-item-purchase">
                  <van-col span="12" class="group-item-purchase-img">
                    <template v-for="(imgItem, imgIndex) in item.purchaseUserImg">
                      <img :src="imgItem" alt="">
                    </template>
                  </van-col>
                  <van-col span="2" class="group-item-purchase-dot">
                    <span>
                      ...
                    </span>
                  </van-col>
                  <van-col span="8" offset="2" class="group-item-purchase-text">
                    已有{{ item.purchaseUserImg.length }}人购买
                  </van-col>
                </van-row>

                <van-row class="group-item-address">
                  <van-col span="16" class="group-item-address-text">
                    来自: {{ item.address }}
                  </van-col>
                  <van-col span="4" offset="4" class="group-item-address-icon">
                    <van-icon
                      name="close"
                      color="#101010"
                      @click.stop="onClickScreen(item.id)"
                    />
                  </van-col>
                </van-row>
              </div>
            </template>
          </van-list>
        </van-tab>
      </van-tabs>
    <!-- </keep-alive> -->

    <!-- 是否屏蔽 -->
    <van-dialog
      v-model="isScreenShow"
      :show-confirm-button="false"
      show-cancel-button
    >
      <van-button
        size="large"
        @click="shieldPerson"
        class="shield-btn"
      >
        屏蔽该人
      </van-button>
      <van-button
        size="large"
        @click="shieldMessage"
        class="shield-btn"
      >
        屏蔽该条信息
      </van-button>
    </van-dialog>

    <!-- 点击搜索弹出层 -->
    <van-popup v-model="searchShow" position="top" class="search-pop">
      <form action="/">
        <van-search
          v-model="searchData"
          placeholder="请输入商品名称"
          show-action
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </van-popup>

    <!-- 点击筛选弹出层 -->
    <van-popup v-model="filterShow" position="top" class="filter-pop">
      <van-nav-bar
        title="个性筛选"
      />
      <van-cell-group class="filter-top">
        <van-cell :title="addressText" is-link @click="onClickAddress" />
        <van-cell title="选择开始时间" is-link @click="onClickStartDate" />
        <van-cell title="选择结束时间" is-link @click="onClickEndDate" />
      </van-cell-group>
      <div
        class="filter-slider-container"
      >
        <p class="filter-slider-txt">分享者级别</p>
        <div>
          <span class="filter-slider-top" ref="filterTopTxt">1级</span>
          <van-slider
            v-model="form.stepSharerLevel"
            :step="filterStep"
            @change="filterChange"
            bar-height="4px"
            class="filter-slider"
            ref="filterSlider"
          />
        </div>
      </div>
      <div class="distance-container">
        <p class="distance-title">选择距离</p>
        <van-button @click="onClickDistanceBtn" class="distance-btn">全区</van-button>
        <van-button @click="onClickDistanceBtn" class="distance-btn">全市</van-button>
        <van-button @click="onClickDistanceBtn" class="distance-btn">全县</van-button>
        <van-button @click="onClickDistanceBtn" class="distance-btn">5公里内</van-button>
        <van-button @click="onClickDistanceBtn" class="distance-btn">10公里内</van-button>
      </div>

      <div class="filter-bottom-btn">
        <van-button class="filter-bottom-reset" @click="onClickReset">重置</van-button>
        <van-button class="filter-bottom-submit" @click="onClickSubmit">确定</van-button>
      </div>
    </van-popup>

    <!-- 筛选条件-地区 -->
    <van-popup v-model="popAddressShow" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="listAddressConfirm"
        @cancel="listAddressCancel"
      />
    </van-popup>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    List,
    Icon,
    Popup,
    Dialog,
    Slider,
    Area,
    Tab,
    Tabs
  } from 'vant';
  // 地区数据
  import jsonAddress from '@/components/common/address';
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [List.name]: List,
      [Icon.name]: Icon,
      [Popup.name]: Popup,
      [Dialog.name]: Dialog,
      [Slider.name]: Slider,
      [Area.name]: Area,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
    },
    data() {
      return {
        popAddressShow: false,
        addressData: 110101,
        areaList: jsonAddress,
        searchShow: false,
        filterShow: false,
        searchData: '',
        loading: false,
        finished: false,
        isScreenShow: false,
        // 点击屏蔽的消息的ID
        chosenId: 0,
        filterStep: 10,
        addressText: '选择地区',
        tabActive: 0,
        form: {
          stepSharerLevel: 10,
          address: [],
          startTime: 0,
          endTime: 0,
          distance: '',
        },
        list: {
          communicate: [{
            id: 's0',
            userImg: '../../../static/img/login.png',
            userName: '用户昵称',
            userDate: '2018/6/6 12:20',
            price: '50多多币',
            groupName: '这里是群名称',
            groupDetail: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，最多显示两行，超过两行，超过两行，超过两行，超过两行',
            label: ['标签0', '标签1', '标签2', '标签3', '标签1', '标签2', '标签3'],
            purchaseUserImg: ['../../../static/img/login.png','','','','','','','','','','',''],
            address: '大宁德必易园'
          }, {
            id: 's1',
            userImg: '',
            userName: '用户昵称',
            userDate: '2018/6/6 12:20',
            price: '50多多币',
            groupName: '这里是群名称',
            groupDetail: '这里是群介绍，这里是群介绍',
            label: ['标签0', '标签1'],
            purchaseUserImg: ['','','','','','',''],
            address: '大宁德必易园'
          }, {
            id: 's2',
            userImg: '',
            userName: '用户昵称111',
            userDate: '2018/6/6 12:20',
            price: '50多多币',
            groupName: '这里是群名称',
            groupDetail: '这里是群介绍，这里是群介绍',
            label: ['标签0', '标签1'],
            purchaseUserImg: ['','','','','',''],
            address: '大宁德必易园'
          }],
          extension: [{
            id: 's3',
            userImg: '../../../static/img/login.png',
            userName: '用户昵称3',
            userDate: '2018/6/6 12:20',
            price: '50多多币',
            groupName: '这里是群名称',
            groupDetail: '这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，这里是群介绍，最多显示两行，超过两行，超过两行，超过两行，超过两行',
            label: ['标签0', '标签1', '标签2', '标签3', '标签1', '标签2', '标签3'],
            purchaseUserImg: ['../../../static/img/login.png','','','','','','','','','','',''],
            address: '大宁德必易园'
          }, {
            id: 's4',
            userImg: '',
            userName: '用户昵称4',
            userDate: '2018/6/6 12:20',
            price: '50多多币',
            groupName: '这里是群名称',
            groupDetail: '这里是群介绍，这里是群介绍',
            label: ['标签0', '标签1'],
            purchaseUserImg: ['','','','','','',''],
            address: '大宁德必易园'
          }, {
            id: 's5',
            userImg: '',
            userName: '用户昵称5',
            userDate: '2018/6/6 12:20',
            price: '50多多币',
            groupName: '这里是群名称',
            groupDetail: '这里是群介绍，这里是群介绍',
            label: ['标签0', '标签1'],
            purchaseUserImg: ['','','','','',''],
            address: '大宁德必易园'
          }]
        }
      }
    },
    mounted() {
      // 进入该页面 修改父页面的index
      this.$parent.activeIndex = 0;

      this.$nextTick(() => {
        this.clacLabelItemWidth('label-container', 0);
        this.clacLabelItemWidth('group-item-purchase-img', 10);
      })
    },
    methods: {
      onSearch() {
        // 用户点击键盘上的搜索
        // this.searchData
      },
      onCancel() {
        // 用户点击搜索pop的取消
        this.searchShow = !this.searchShow;
      },
      onClickSearch() {
        // 用户点击键盘上的搜索
        this.searchShow = !this.searchShow;
      },
      onClickFilter() {
        // 点击筛选
        this.filterShow = !this.filterShow;
      },
      filterChange(val) {
        let filterSlider = this.$refs.filterSlider;
        let filterSliderWidth = filterSlider.$el.clientWidth;
        let sliderTopTxt = this.$refs.filterTopTxt;
        let left = val / 100 * filterSliderWidth + 20 - sliderTopTxt.offsetWidth / 2;
        sliderTopTxt.innerHTML = val / this.filterStep + '级';
        sliderTopTxt.style.left = left + 'px';
      },
      onClickAddress() {
        // 选择地区
        this.popAddressShow = !this.popAddressShow;
      },
      onClickStartDate() {
        // 选择开始日期
      },
      onClickEndDate() {
        // 选择结束日期
      },
      onClickDistanceBtn(btn) {
        let btns = document.getElementsByClassName('distance-btn');
        for(let i = 0 , len = btns.length ; i < len ; i ++) {
          btns[i].style.backgroundColor = "#fff";
          btns[i].style.color = "#101010";
        }
        btn.target.style.backgroundColor = "#5677FC";
        btn.target.style.color = "#fff";
        this.form.distance = btn.target.children[0].innerHTML;
      },
      onClickReset() {
        // 重置
        let btns = document.getElementsByClassName('distance-btn');
        for(let i = 0 , len = btns.length ; i < len ; i ++) {
          btns[i].style.backgroundColor = "#fff";
          btns[i].style.color = "#101010";
        }
        this.form = {
          stepSharerLevel: 10,
          address: [],
          startTime: 0,
          endTime: 0,
          distance: '',
        };
        this.addressText = '选择地区';
        this.filterChange(10);
      },
      onClickSubmit() {
        // 提交
        console.log(this.form);
      },
      listAddressConfirm(val) {
        console.log(val)
        this.popAddressShow = !this.popAddressShow;
        this.form.address = val;
        this.addressText = '';
        for(let i = 0 ; i < val.length ; i ++) {
          this.addressText += val[i].name + ' ';
        }
      },
      listAddressCancel() {
        this.popAddressShow = !this.popAddressShow;
      },
      // 获取首页数据
      onLoad() {
        this.$axios({
          method: "POST",
          url: url_g + ''
        }).then((res) => {
          // 还有数据
          if(res.success) {
            // 拼接数组
            this.list.push.apply(this.list, res.data);
          }
          // 没有数据
          else {
            // 不再触发
            this.loading = false;
            this.finished = true;
          }
        }).catch((e)=>{
          this.loading = false;
          this.finished = true;
          this.$dialog.alert({
            message: '您输入的信息有误或网络有问题，请检查重试！'
          });
        });
      },
      onClickScreen(id) {
        // 点击屏蔽
        this.isScreenShow = !this.isScreenShow;
        this.chosenId = id;
      },
      shieldPerson() {
        // 屏蔽个人
        this.isScreenShow = !this.isScreenShow;
        Dialog.confirm({
          title: '提示',
          message: '屏蔽后将不再显示该用户发布的任何群信息，是否确认？'
        }).then(() => {
          // on confirm
          console.log('选择屏蔽个人');
          console.log('选择屏蔽消息的ID： ' + this.chosenId);
        }).catch(() => {
          // on cancel
        });
      },
      // 屏蔽消息
      shieldMessage() {
        this.isScreenShow = !this.isScreenShow;
        Dialog.confirm({
          title: '提示',
          message: '屏蔽后将不再显示该条信息，是否确认？'
        }).then(() => {
          // on confirm
          console.log('选择屏蔽消息');
          console.log('选择屏蔽消息的ID： ' + this.chosenId);
        }).catch(() => {
          // on cancel
        });
      },
      jumpToDetail(id) {
        this.$router.push({ path: '/detail', query:{ id: id }});
      },
      clacLabelItemWidth(targetClass, minus) {
        let $items = document.getElementsByClassName(targetClass);
        for(let i = 0 , len = $items.length; i < len ; i++) {
          let $thisItems = $items[i];
          let $children = $thisItems.children;
          let itemsWidth = $thisItems.offsetWidth;
          let $dot = $thisItems.nextElementSibling;
          let childrenWidth = 0;
          for(let j = 0 ; j < $children.length; j ++) {
            childrenWidth += $children[j].offsetWidth;
          }
          // 孩子节点的宽度减去marginLeft
          childrenWidth -= ($children.length - 1) * minus;
          if(childrenWidth > itemsWidth) {
            // 标签的宽度大于容器的宽度  显示点点点
            $dot.style.opacity = 1;
          } else {
            $dot.style.opacity = 0;
          }
        }
      },
      onClickTabChange(index, title) {
        setTimeout(()=>{
          this.clacLabelItemWidth('label-container', 0);
          this.clacLabelItemWidth('group-item-purchase-img', 10);
        },100);
      }
    }
  }
</script>

<style scoped="scoped">
.search-btn {
  padding: 0 10px;
}
.opacity-0 {
  opacity: 0;
}
.search-container {
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid #ccc;
}
.search-container-btn {
  height: 32px;
  line-height: 32px;
  border-radius: 10px;
}
.search-container-txt {
  line-height: 32px;
  text-align: center;
}
.group-container {
  margin-bottom: 50px;
}
.group-item {
  padding: 10px 25px;
  border-bottom: 1px solid #ccc;
}
.group-item-title {
  margin-top: 10px;
}
.group-item-title-img {
  display: inline-block;
  width: 42px;
  height: 42px;
  background-color: #ccc;
}
.group-item-title-content {
  display: inline-flex;
  flex-direction: column;
}
.group-item-title-content-top,
.group-item-title-content-bottom {
  line-height: 22px;
}
.group-item-title-content-bottom {
  font-size: 12px;
  color: #888888;
}
.group-item-title-price {
  float: right;
  font-size: 16px;
  line-height: 44px;
  color:#E51C23;
}
.group-detail-title {
  line-height: 30px;
}
.group-detail-txt {
  color: #888888;
  font-size: 12px;
  line-height: 16px;
  height: 32px;
  overflow : hidden;
  text-overflow: ellipsis;
  display: box;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.label-container {
  height: 26px;
  overflow: hidden;
}
.label-container-item:first-of-type {
  margin-left: 0;
}
.label-container-item {
  display: inline-block;
  width: 54px;
  height: 26px;
  text-align: center;
  font-size: 12px;
  line-height: 26px;
  border-radius: 10px;
  background-color: #ccc;
  margin-left: 10px;
}
.label-container-dot {
  line-height: 18px;
}
.group-item-purchase {
  height: 30px;
  margin-top: 10px;
}
.group-item-purchase-img {
  height: 30px;
  overflow: hidden;
}
.group-item-purchase-img img:first-of-type {
  margin: 0;
}
.group-item-purchase-img img {
  display: inline-block;
  height: 28px;
  width: 28px;
  margin-left: -10px;
  background-color: #666;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.group-item-purchase-text {
  line-height: 30px;
  text-align: right;
}
.group-item-address {
  margin: 15px 0 5px;
  font-size: 13px;
  line-height: 30px;
}
.group-item-address-icon {
  font-size: 24px;
  text-align: right;
}
.shield-btn {
  color: red;
}
.search-pop {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.filter-pop {
  width: 100%;
  height: auto;
  background-color: #fff;
  overflow: hidden;
}
.filter-slider-container {
  position: relative;
  padding: 0 20px;
}
.filter-slider {
  margin-top: 40px;
}
.filter-slider-txt {
  font-size: 18px;
  color: #101010;
  line-height: 26px;
}
.filter-slider-top {
  position: absolute;
  left: 42px;
  top: 32px;
  font-size: 14px;
}
.distance-container {
  padding: 0 20px;
  margin-top: 35px;
}
.distance-title {
  font-size: 18px;
  color: #101010;
  line-height: 26px;
  margin-bottom: 10px;
}
.distance-btn {
  margin-right: 20px;
  margin-bottom: 10px;
  height: 35px;
  line-height: 35px;
  padding: 0 25px;
}
.filter-bottom-btn {
  padding: 0 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.filter-bottom-reset {
  width: 30%;
  margin-right: 15px;
}
.filter-bottom-submit {
  width: calc(70% - 20px);
  background-color: #5677FC;
  color: #fff;
}
.filter-top {
  font-size: 18px;
  padding: 0 5px;
}
</style>